import React, { Component } from 'react';
import '../assets/index.css';
// import _ from './components/Test';
class Home extends Component {

    constructor() {
        super();

        this.state = {
            name: "Jakey",
            age: '30',
            userinfo: {
                username: "test"
            },
            color: 'title',
            style: {
                color: 'yellow',
                fontSize: '40px'
            }
        }
    }

    run = (event) => {
        alert(event)
    }

    setUserName = (e) => {
        let value = e.target.value
        let data = Object.assign({}, this.userinfo, {username : value})
        this.setState({
            userinfo: data
        })
    }

    inputChange = (e)=> {
        console.log(e.target.value)
        this.setUserName(e)
    }

    getInput() {
        // _()
        // alert(this.state.userinfo.username)
    }

    render() {
        return (
            <div>
                <h2 className='title'>This is Jake</h2>
                {/* <div className= {this.state.color}>Check class</div>
                <p>这个是一个标签{this.state.name}</p>
                <h3 title= {this.state.name}>{this.state.userinfo.username}</h3>

                <label htmlFor="name">姓名</label>
                <input id= 'name'/>

                <div style={this.state.style}>Jakey test style</div>
                <hr/> */}

                <input onChange={this.inputChange}/> <button id = "jake" onClick={this.getInput.bind(this)}>获取input值</button>
            </div>
        )
    }

}

export default Home;